<template>
  <div>
    <div class="tableBox">
      <div class="trBox flex">
        <div class="thBox" v-for="(item, index) in props.customTableThData">
          {{ item.label }}
        </div>
      </div>
      <div
        class="trBox flex"
        v-for="(item, index) in props.customTableData"
        :key="index"
      >
        <div class="tdBox" v-for="(item2, index2) in item" :key="index2">
          {{ item2.prop }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'SimpleTable' })

interface Props {
  customTableThData: any[] // 自定义表格表头 一维数组
  customTableData: any[] // 自定义表格数据 二维数组
}
let props = withDefaults(defineProps<Props>(), {
  customTableThData: () => [],
  customTableData: () => [],
  // 更多属性...
})
</script>

<style scoped lang="scss">
.tableBox {
  width: 100%;
  border: 1px solid #ebeef5;

  .trBox {
    width: 100%;

    .thBox {
      border: 1px solid #ebeef5;
      padding: 10px;
      color: #909399;
      font-size: 12px;
      flex: 1;
    }

    .tdBox {
      border: 1px solid #ebeef5;
      padding: 10px;
      color: #606266;
      font-size: 12px;
      flex: 1;
    }
  }
}

@media print {
  /*强制打印背景(这样才能打印出背景颜色)*/
  * {
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }

  /* 去掉页眉页脚 */
  @page {
    size: auto;
    margin: 4mm;
  }

  body,
  html {
    /*如果vue最外层id，默认是#app。如果设置了height:100%;，那么#app也加*/
    height: auto !important;
  }
}
</style>
